<!-- 短信模板配置 swx -->
<template>
  <div class="noteModelCfg">
    <el-table :data="tableData"
              height="700"
              border
              ref="multipleTable"
              :header-cell-style="{background:'#f5f5f5'}"
              @selection-change="handleSelectionChange">
      <!-- @selection-change="handleSelectionChange" -->
      <!-- <el-table-column width="55"
                       :render-header="renderHeader">
        <template slot-scope="scope">
          <el-checkbox v-model="scope.row.is_select"></el-checkbox>
        </template>
      </el-table-column> -->
      <el-table-column type="selection"
                       width="55">
      </el-table-column>
      <el-table-column label="序号"
                       align="center"
                       width="80">
        <template slot-scope="scope">
          <span>{{ scope.$index+1}}</span>
        </template>
      </el-table-column>
      <el-table-column label="短信内容"
                       align="center"
                       show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.content}}</span>
        </template>
      </el-table-column>
      <el-table-column label="工序状态"
                       align="center"
                       width="120"
                       show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.stage==0?'设计深化':scope.row.stage==1?"加工制作":scope.row.stage==2?"工厂堆放":scope.row.stage==3?"道路运输":scope.row.stage==4?"现场堆场":scope.row.stage==5?"现场安装":scope.row.stage==6?"安装完成":""}}</span>
        </template>
      </el-table-column>
      <el-table-column label="说明"
                       align="center"
                       show-overflow-tooltip>
        <template slot-scope="scope">
          <span>{{ scope.row.explain }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发送时间"
                       width="185px"
                       align="center"
                       show-overflow-tooltip>
        <template slot-scope="scope">
          <span v-if="scope.row.send_time_type==1">即时发送</span>
          <!-- <el-select v-else
                     v-model="scope.row.user_list"
                     placeholder="请选择"
                     @change="onSendTime">
            <el-option v-for="item in options"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select> -->
          <el-time-select v-else
                          v-model="scope.row.send_time_line"
                          :picker-options="{
    start: '01:00',
    step: '01:00',
    end: '24:00'
  }"
                          @change="onSendTime(scope.row,scope.row.send_time_line)"
                          placeholder="选择时间">
          </el-time-select>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24"
            class="footer-box">
      <el-button @click="cancel">取消</el-button>
      <el-button @click="sure"
                 type="primary">确认</el-button>
    </el-col>
  </div>
</template>
<script>
import { noteSettingApi } from "@/services/SystemSetting";
import { standardCodeApi } from "@/services/StandardCode";
export default {
  data () {
    const generateData = _ => {
      const data = [];
      for (let i = 1; i <= 24; i++) {
        data.push({
          value: i.toString(),
          label: `${i}:00`,
        });
      }
      return data;
    };
    return {
      multipleSelection: [],
      modelTemplateArr: [],
      projectId: this.$route.query.projectId,
      adminId: this.$route.query.adminId,
      uuid: this.$route.query.uuid,
      tableData: [],
      options: generateData(),
      value: '',
      isIndeterminate: true
    }
  },
  methods: {
    handleSelectionChange (val) {
      this.multipleSelection = val;
      // console.log('this.multipleSelection=', this.multipleSelection, 'tableData=', this.tableData)
    },
    //发送时间值发生变化时触发的事件
    onSendTime (row, userList) {
      // console.log('发送时间=', row, userList)
    },
    renderHeader (h) {
      return (
        <el-checkbox indeterminate={this.isIndeterminate} onChange={this.selectAll} v-model="value"></el-checkbox>
      )
    },
    selectAll (data) {
      for (var i = 0; i < this.tableData.length; i++) {
        this.tableData[i].is_send = data;
      }
    },
    getData () {
      var bstop = true
      noteSettingApi.getSmsList({
        params: {
          sms_admin_id: this.$route.query.sms_admin_id
        }
      }).then((res) => {
        this.tableData = res.data;
        //判断是否选中
        // var a = [];
        for (var i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].is_select == 1) {
            this.multipleSelection.push(this.tableData[i]);
          }
        }
        //console.log(' this.multipleSelection=', this.multipleSelection)
        // //this.handleSelectionChange(a);
        // console.log(' this.multipleSelection=', this.multipleSelection)
      }).catch((error) => {
        console.log(error)
      })
    },
    handleCurrentChange (page) {
      //this.page = page;
      this.getData();
    },
    sure () {
      // this.tableData = Object.assign(this.tableData, this.multipleSelection)
      var a = [];
      for (var i = 0; i < this.multipleSelection.length; i++) {
        a.push(this.multipleSelection[i].sms_config_id)
      }
      //已选中的is_select字段更新为1
      this.tableData.map(item => {
        if (a.includes(item.sms_config_id) == true) {
          item.is_select = 1;
        }
      });
      //未选中的is_select字段更新为0
      this.tableData.map(item => {
        if (a.includes(item.sms_config_id) == false) {
          item.is_select = 0;
        }
      });
      //获取json需要传的数据
      noteSettingApi.updateUserSmsList({
        data: {
          sms_admin_id: this.$route.query.sms_admin_id,
          sms_config_info: JSON.stringify(this.tableData)
        }
      }).then((res) => {
        if (res.code == 0) {
          this.$message.success('发送成功');
          this.getData();
          this.$router.go(-1)
        } else {
          this.$message.error(res.msg);
        }
      }).catch((error) => {
        console.log(error)
      })
    },
    cancel () {
      this.$router.go(-1)
    },
    //获取标准码
    getStandardCode () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'proccess_status'
        }
      }).then((res) => {
        //console.log('工序状态标准码的值', res)
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  mounted () {
    this.getData();
  },
  watch: {
    tableData (n, o) {
      this.$nextTick(() => {
        for (var i = 0; i < this.tableData.length; i++) {
          if (this.tableData[i].is_select == 1) {
            this.$refs.multipleTable.toggleRowSelection(this.tableData[i], true);
          }
        }
      })
    },
  },
  created () {
    //获取标准码
    this.getStandardCode();
  }
}
</script>
<style scoped lang="scss">
.footer-box {
  margin-top: 20px;
  margin-bottom: 20px;
  text-align: center;
  background: white;
}
.noteModelCfg {
  padding: 20px;
  height: 100vh;
  //height: 100vh;
}
</style>